<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亿信聊天室 我的粉丝</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/menber.css">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<header>
    <div class="top">
        <div class="container">
            <!--未登录状态-->
            <div class="login" style="display: none">
                <div class="top-reg">
                    <div class="denglu fl">
                        <a href="javascript:;"><span><img src="../images/icon_wdzh.png" alt="">登陆</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="zhuce fl">
                        <a href="javascript:;"><span><img src="../images/icon_yhgl.png" alt="">注册</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>游客，您好！</span>
                    您是第666位访问网站的人
                </div>
            </div>
            <!-- 登陆状态 -->
            <div class="login success">
                <div class="top-reg">
                    <div class="qiandao fl">
                        <a href="javascript:;"><span><img src="../images/icon_rl.png" alt="">签到</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="message.html"><span><img src="../images/icon_tz.png" alt="">通知</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="menber.html"><span><img src="../images/icon_grzx.png" alt="">个人中心</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="javascript:;" class='loginout'><span><img src="../images/icon_aqtc.png" alt="">安全退出</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>xxx，您好！</span>
                    当前在线人数666人
                </div>
            </div>
        </div>
    </div>
</header>
<!--logo-->
<div class="logo">
    <div class="container">
        <div class="logoimg fl">
            <a href="../index.html"><img src="../images/icon_logo.png" alt=""></a>
        </div>
        <div class="logoright fr">
            <li class="on"><a href="../index.html">首页</a></li>
            <li><a href="javascript:;" class="addroom">创建房间</a></li>
            <li><a href="javascript:;"><img src="../images/icon_nav.png" alt=""></a></li>
            <div class="search-box fl">
                <input type="text" class="search" placeholder="请输入房间ID">
                <img src="../images/icon_search.png" alt="">
                <div class="result_box">

                </div>
            </div>
        </div>
    </div>
</div>
<!--个人中心-->
<div class="container menber">
    <div class="menber-left fl">
        <div class="menber-left-top">
            <div class="user-logo">
                <img src="../images/icon_mrtx.png" alt="" class="user-left-head">
                <p class="cen_username">用户名</p>
                <p class="user_id">ID:445566</p>
            </div>
            <div class="menber-left-cen">
                <li>
                    <p class="user_hot">1000</p>
                    <p>活跃度</p>
                </li>
                <li>
                    <p class="user_money">100</p>
                    <p>亿信币</p>
                </li>
                <div class="clearfix"></div>
            </div>
            <div class="menber-left-link">
                <li><a href="menber.html"><img src="../images/icon_wdzl.png" alt="">我的资料</a></li>
                <li><a href="wdgz.html"><img src="../images/icon_wdgz.png" alt="">我的关注</a></li>
                <li class="on"><a href="fans.html"><img src="../images/icon_wdfs.png" alt="">我的粉丝</a></li>
                <li><a href="wdzh.html"><img src="../images/icon_wdzh.png" alt="">我的账户</a></li>
                <li><a href="message.html"><img src="../images/icon_wdmsg.png" alt="">我的消息</a></li>
            </div>
        </div>
    </div>
    <div class="menber-right fl">
        <!-- 我的资料 -->
        <div class="user-info fans">
            <input type="text" placeholder="请输入用户昵称" class="fans_search">
        </div>
        <div class="gz-list">
            <ul>
                <p>你还没有粉丝哦~</p>
            </ul>
        </div>
        <div class="message-page">
            <div class="pagebox" style="margin-right: 95px;">
                <span class="blue"><a href="javascript:;" class="prev">上一页</a></span>
                <span class="blue">2/3页</span>
                <span class="blue"><a href="javascript:;" class="next">下一页</a></span>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!--个人中心end-->
<!--footer-->
<footer>
    <div class="container">
        <div class="footer-list">
            <div class="footer-tit">
                联系我们
            </div>
            <ul>
                <li><a href="tencent://message/?uin=88888888&Site=&menu=yes">商务QQ:11111111</a></li>
                <li>技术咨询:11111111</li>
                <li>联系电话:11111111</li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                常见问题
            </div>
            <ul>
                <li><a href="javascript:;">账号问题</a></li>
                <li><a href="javascript:;">常见问题</a></li>
                <li><a href="javascript:;">新手入门</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                关于我们
            </div>
            <ul>
                <li><a href="javascript:;">公司介绍</a></li>
                <li><a href="javascript:;">隐私政策</a></li>
                <li><a href="javascript:;">免责声明</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                友情链接
            </div>
            <ul>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <img src="../images/icon_logo1.png" alt="">
        </div>
        <div class="clearfix"></div>
    </div>
</footer>
<div class="copyright">
    <div class="container">
        <div class="fr">川ICP备案号xxxxx号</div>
        <div class="cpr">Copyright ©聊天室网 2014-2018.All rights reseved</div>
    </div>
</div>

<script>
    $(window).ready(function(){
        // 数据初始化
        function get_list(){
            $.ajax({
                url: 'http://120.79.73.159/api/personal/get_my_fans',
                type:'POST',
                datatype:'json',
                data:{uid:$.cookie('user_id'),token:$.cookie('user_token')},
                success:(function(lists){
                    if (lists.ret==205||lists.ret==201){
                        $('.gz-list').append('<p>你还没有关注任何人哦~</p>');
                        $('.message-page').empty();
                    }else{
                        var list = JSON.parse(lists);
                        var gzinfo='';
                        $('.gz-list ul').empty();
                        var s = list.data.back_data;   //4
                        var gz_sttus,
                            gz_img_status;
                        for( num in s ){
                            s[num].hz_notice==1?gz_sttus='互相关注':gz_sttus='点击关注';
                            s[num].hz_notice==1?gz_img_status='../images/icon_hxgz.png':gz_img_status='../images/icon_wdgz.png';
                            gzinfo+=
                                '<div class="gz-box">'+
                                '<div class="fr gz-btn">'+
                                '<a href="javascript:;" title="点击关注" class="gz-both" id="gz_button" data-gz-status="'+ s[num].hz_notice +'" data-gz-id="'+ s[num].id +'"><img src="'+gz_img_status+'" alt="" height="12"><span>'+gz_sttus+'</span></a>'+
                                '</div>'+
                                '<div class="gz-info">'+
                                '<div class="gz-info-img">'+
                                '<img src="'+ s[num].head +'" alt="">'+
                                '</div>'+
                                '<div class="gz-info-txt">'+
                                '<div class="gz-name">'+s[num].nickname+'</div>'+
                                '<div class="gz-hyd">活跃度:1200</div>'+
                                '</div>'+
                                '</div>'+
                                '</div>';
                        };
                        $('.gz-list ul').append(gzinfo);
                        var prev,next,nowpage,allpage;
                        nowpage = Number(money.data.now_page);
                        allpage = money.data.total_page;
                        prev = nowpage-1;
                        next = nowpage+1;
                        prev<1?prev=1:prev = nowpage-1;
                        next >= allpage ? next = allpage : next = nowpage+1;
                        var page =  '<span class="blue"><a href="javascript:;" class="prev pages" data-page="'+prev+'">上一页</a></span>\n' +
                            '<span class="blue">'+nowpage+'/'+allpage+'页</span>\n' +
                            '<span class="blue"><a href="javascript:;" class="next pages" data-page="'+next+'">下一页</a></span>\n';
                        $('.pagebox').empty();
                        $('.pagebox').append(page);
                    }

                }),
            })
        };
        get_list();
        $('.pagebox').on('click','.pages',function(){
            var num = $(this).data('page');
            get_list(num);
        });
    //取消关注
        $(document).on('click','#gz_button',function(){
            var  _this = $(this);
            console.log(_this.data('gz-status'),_this.data('gz-id'));
            if(_this.data('gz-status')==1){
                 //取消关注
                 $.ajax({
                     url:'http://120.79.73.159/api/personal/attention_cancel',
                     type:'POST',
                     datatype:'json',
                     data:{
                         uid:$.cookie('user_id'),
                         token:$.cookie('user_token'),
                         fans_uid:_this.data('gz-id')
                     },success:(function (data) {
                         var data = JSON.parse(data);
                         _this.children('span').html('互相关注');
                         _this.children('img').attr('src','../images/icon_hxgz.png');
                         get_list();
                     })
                 })
            }else{
                //加关注
                $.ajax({
                    url:'http://120.79.73.159/api/personal/attention_someone',
                    type:'POST',
                    datatype:'json',
                    data:{
                        uid:$.cookie('user_id'),
                        token:$.cookie('user_token'),
                        fans_uid:_this.data('gz-id')
                    },success:(function (data) {
                        var data = JSON.parse(data);
                        _this.children('span').html('点击关注');
                        _this.children('img').attr('src','../images/icon_wdgz.png');
                        get_list();
                    })
                })
            }

        });

    //    根据昵称搜索
        $('.fans_search').keyup(function(){
            if($('.fans_search').val().length!=0){
                setTimeout(function (){
                    $.ajax({
                        url:'http://120.79.73.159/api/personal/get_user_nickname',
                        data:{uid:$.cookie('user_id') ,token:$.cookie('user_token'),nickname:$('.fans_search').val()},
                        type:'POST',
                        dataType:'json',
                        success:(function(search){
                            if(search.ret!='200'){
                                $('.gz-list ul').html('<p>没有找到该用户哦~</p>');
                            }
                            else{
                                var gzinfo_txt,gzinfo_img;
                                search.data.back_data[0].is_attention==0?gzinfo_txt='已关注':gzinfo_txt = '点击关注';
                                search.data.back_data[0].is_attention==0?gzinfo_img='':gzinfo_img = '../images/icon_wdgz.png';
                                $('.gz-list ul').empty();
                                var search_re =
                                    '<div class="gz-box">'+
                                    '<div class="fr gz-btn">'+
                                    '<a href="javascript:;" title="'+gzinfo_txt+'" class="gz-both gz-no-both" id="gz_button" data-gz-id="'+ search.data.back_data[0].id +'"><img src="'+gzinfo_img+'" alt=""><span>'+gzinfo_txt+'</span></a>'+
                                    '</div>'+
                                    '<div class="gz-info">'+
                                    '<div class="gz-info-img">'+
                                    '<img src="'+ search.data.back_data[0].head +'" alt="">'+
                                    '</div>'+
                                    '<div class="gz-info-txt">'+
                                    '<div class="gz-name">'+ search.data.back_data[0].nickname +'</div>'+
                                    '<div class="gz-hyd">活跃度:1200</div>'+
                                    '</div>'+
                                    '</div>'+
                                    '</div>';
                                $('.gz-list ul').append(search_re);
                            }
                        }),
                    });
                },200)
            }else{
                get_list();
            }
        });
    });
</script>

<script src="../js/common.js"></script>
<script src="../js/menber.js"></script>
<script src="../js/distpicker.data.js"></script>
<script src="../js/distpicker.js"></script>
<script src="../js/main.js"></script>
</body>
</html>